<template>
  <div class="addMenus">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="一级分类" prop="first_cateid">
        <el-select
          @change="onChange"
          v-model="form.first_cateid"
          placeholder="请选择上级菜单"
        >
          <el-option label="请选择" disabled value="-1"> </el-option>
          <el-option
            v-for="item in arr1"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" prop="second_cateid">
        <el-select v-model="form.second_cateid" placeholder="请选择上级菜单">
          <el-option label="请选择" disabled value="-1"> </el-option>
          <el-option
            v-for="item in arr2"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsname">
        <el-input class="input" v-model="form.goodsname"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input class="input" v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="市场价格">
        <el-input class="input" v-model="form.market_price"></el-input>
      </el-form-item>
      <el-form-item class="input" label="图片" prop="img">
        <el-upload
          ref="uploadRef"
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :auto-upload="false"
          :on-change="imgChange"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品规则" prop="specsid">
        <el-select
          @change="change"
          v-model="form.specsid"
          placeholder="请选择上级菜单"
        >
          <el-option label="请选择" disabled value="-1"> </el-option>
          <el-option
            v-for="item in arr3"
            :key="item.id"
            :label="item.specsname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品属性" prop="specsattr">
        <el-select
          v-model="form.specsattr"
          multiple
          placeholder="请选择上级菜单"
        >
          <el-option label="请选择" disabled value="-1"> </el-option>
          <el-option
            v-for="(item, index) in arr4"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否新品">
        <el-radio-group v-model="form.isnew">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否热卖">
        <el-radio-group v-model="form.ishot">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div id="desc"></div>
      <el-switch
        class="mode"
        v-model="form.status"
        inactive-text="状态"
        :active-value="1"
        :inactive-value="2"
      >
      </el-switch>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button type="info" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getOneListApi,
  getTwoListApi,
  getSpecsApi,
  getAttrApi,
  addGoodsApi,
} from "@/api/goods";
import Editor from "wangeditor";
export default {
  data() {
    return {
      arr1: [],
      arr2: [],
      arr3: [],
      arr4: [],
      imgUrl: "",
      form: {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        img: "",
        description: "",
        specsid: "",
        specsattr: "",
        isnew: 1,
        ishot: 1,
        status: 1,
      },
      rules: {
        first_cateid: [
          { required: true, message: "此项不能为空", trigger: "change" },
        ],
        second_cateid: [
          { required: true, message: "此项不能为空", trigger: "change" },
        ],
        goodsname: [
          { required: true, message: "此项不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getOneList();
    this.getSpecs();
    this.initEditor();
  },
  methods: {
    //富文本编辑器
    initEditor() {
      this.editor = new Editor("#desc");
      this.editor.create();
    },
    //获取富文本编辑器的内容
    getText() {
      // 获取富文本编辑器详情数据
      return this.editor.txt.html();
    },
    //提交添加事件
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let formData = new FormData();
          let temp = this.form.specsattr.join(",");
          let temp1 = this.getText();
          this.form.specsattr = temp;
          this.form.description = temp1;
          for (let attr in this.form) {
            formData.append(attr, this.form[attr]);
          }
          let res = await addGoodsApi(formData);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.clearFormData()
          } else {
            this.$message({
              type: 'warning',
              message: res.msg,
            });
          }
        } else {
          alert("error submit!!");
          return false;
        }
      });
    },
    //获取一级商品分类列表
    async getOneList() {
      let res = await getOneListApi();
      if (res.code == 200) {
        this.arr1 = res.list;
        console.log(res.list, "一级");
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    //获取商品的规格列表
    async getSpecs() {
      let res = await getSpecsApi();
      if (res.code == 200) {
        this.arr3 = res.list;
        console.log(res.list, "规格列表");
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    //获取二级商品分类列表
    async getTwoListApi(pid) {
      let res = await getTwoListApi({ params: { pid } });
      if (res.code == 200) {
        this.arr2 = res.list;
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    //获取规格对应的属性列表
    async getAttr(id) {
      let res = await getAttrApi({ params: { id } });
      if (res.code == 200) {
        this.arr4 = res.list[0].attrs;
        console.log(res.list[0].attrs, 11111);
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    //清除表单
    clearFormData() {
      this.form = {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        img: "",
        description: "",
        specsid: "",
        specsattr: "",
        isnew: 1,
        ishot: 1,
        status: 1,
      };
    },
    //返回
    back() {
      this.$router.push("/goods");
    },
    //一级下拉框值改变
    onChange(val) {
      this.getTwoListApi(val);
    },
    //规格改变对应的属性页改变
    change(val) {
      this.getAttr(val);
    },
    //图片状态修改
    imgChange(file) {
      this.imgUrl = URL.createObjectURL(file.raw);
      // 4.将文件赋值给form里面的img
      this.form.img = file.raw;
      console.log(this.form.img);
    },
  },
};
</script>
<style scoped lang="less">
.addMenus {
  .input {
    width: 40%;
  }
  .mode {
    margin: 0 0 30px 12px;
  }
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
#desc {
  width: 70%;
}
</style>
